<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>合同签约</title>
    <script type="text/javascript" src="js/flexible2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body class="page-sign-body">
    <div class="coms-container page-ht-qy">
        <div class="sec-fm"><a href="ChaKanHeTong.html"><img src="images/hetongfengmian.jpg" /></a></div>
        <div class="sec-qm-check">
            <form action="HeTongQianYue-Result.html">
                <div class="soma-hd clearfix">
                    <span class="tit">签名区域</span>
                    <a href="javascript:void(0);" id="J_cxqm-btn">重新签名</a>
                </div>
                <div class="soma-bd">
                    <span class="tip-1"  id="J_qm-btn">点击进行签名</span>
                    <img src="" id="J_img-sign" class="img-sign">
                </div>
                    <input type="submit" class="coms-btn primary mt50">
            </form>
        </div>
    </div>
    <div class="page-ht-signing" id="J_page-ht-signing">
        <canvas id="canvas" class="sec-canvas" width="500" height="500">Your browser doesn't support signing</canvas>
        <div class="ft-handle">
            <a href="#" class="clear-btn" id="J_clear-btn">清除</a>
            <a href="#" class="close-btn" id="J_close-btn">取消</a>
            <a href="HeTongQianYue.html" class="confirm-btm" id="J_confirm-btn">确认</a>
        </div>
    </div>
    <script type="text/javascript" src="js/zepto.js"></script>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <script type="text/javascript" src="js/signature_pad.min.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script> -->
    <script type="text/javascript" src="js/mDialog.js"></script>
    <script type="text/javascript">
    $(function() {
        var signDialog;
        var $win = $(window);
        var $ftHandle = $("#J_page-ht-signing").find(".ft-handle");
        var canvasW, canvasH;
        var $canvas = $("#canvas"),
            $qmBtn = $("#J_qm-btn"),
            $cxqmBtn = $("#J_cxqm-btn"),
            $clearBtn = $("#J_clear-btn"),
            $confirmBtn = $("#J_confirm-btn"),
            $closeBtn = $("#J_close-btn");


        var signaturePad;
        var canvasDataBase64;



        function changeSize() {
            $canvas.attr({ "height": window.innerHeight, "width": window.innerWidth });
            if (!signaturePad) {
                signaturePad = new SignaturePad($("#canvas")[0], {
                    dotSize: 0,
                    velocityFilterWeight: 1,
                    minWidth: 2,
                    maxWidth: 3,
                    penColor: "rgb(0,0,0)",
                    backgroundColor: "rgba(0,0,0,0)"
                });
            }
        }









        $qmBtn.on("click", function() {
            signDialog = mDialog.open({
                title: false,
                closeBtn: false,
                width: "100%",
                height: "100%",
                maxWidth: "100%",
                maxHeight: "100%",
                duration: 300,
                animIn: "slideInRight",
                animOut: "slideOutRight",
                content: $("#J_page-ht-signing"),
                onBeforeShow: function() {},
                onShow: function() {
                    changeSize();
                },
                onBeforeClose: function() {},
                onClose: function() {}
            });
        });
        $cxqmBtn.on("click", function() {
            signDialog = mDialog.open({
                title: false,
                closeBtn: false,
                width: "100%",
                height: "100%",
                maxWidth: "100%",
                maxHeight: "100%",
                duration: 300,
                animIn: "slideInRight",
                animOut: "slideOutRight",
                content: $("#J_page-ht-signing"),
                onBeforeShow: function() {},
                onShow: function() {},
                onBeforeClose: function() {},
                onClose: function() {}
            });
        })



        $closeBtn.on("click", function(e) {
            e.preventDefault();
            signDialog.close();
        });
        $clearBtn.on("click", function(e) {
            e.preventDefault();
            signaturePad.clear();
        });
        $confirmBtn.on("click", function(e) {
            e.preventDefault();
            if(signaturePad.isEmpty()){
                mDialog.msg({
                    content:"签名不能为空！"
                })
            }else{

                canvasDataBase64= $canvas[0].toDataURL("image/png");
                 console.dir(canvasDataBase64);
                $cxqmBtn.show();
                $("#J_qm-btn").hide();
                $("#J_img-sign").attr("src", canvasDataBase64);
                signDialog.close();
            }
            
        })
    })
    </script>
</body>

</html>